
<template>
  <div class="box">
    <img
      src="../image/saoma_icon_fanhui.png"
      class="fan"
      alt=""
      @click="$router.push({ name: 'login' })"
    />
    <h2 class="kuai">
      注册
      <p class="zc"></p>
    </h2>
    <div class="yzmdl">
          <span class="diqu"><b>+86</b></span>
        <van-field
          v-model="username"
          name="userNmae"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
      <van-field
        v-model="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="yanz">
        <input
          type="text"
          class="zou"
          placeholder="请输入验证码"
          v-model="phone"
        />
        <button class="you" @click.stop="yzm(username)">
          获取验证码
        </button>
      </div>
      <div class="btna">
        <button @click="onSubmit">注册</button>
        </div>
      </div>
  
    <div class="dibu">
       <label >
        <input type="checkbox" name="" id="" v-model="checked">
         同意
        <span style="color: #5994f5" @click="$router.push({name:'agreement'})" class="xyy">《用户协议》</span>
        和
        <span style="color: #5994f5" @click="$router.push({name:'agreement'})" class="xyy">《隐私政策》</span>
      </label>
    </div>
  </div>
</template>

<script>
import { yzmApi } from "../../../services/IndexApi";
import { regApi } from "../../../services/IndexApi";
import { Toast } from 'vant';
export default {
  data() {
    return {
      checked: false,
      username: "",
      password: "",
      phone: "",
    };
  },
  methods: {
    onSubmit() {
      if(this.username!=""&&this.password!=""&this.phone!=""){
        if(this.checked){
        regApi({
        code: this.phone,
        password: this.password,
        phone: this.username,
      }).then((res) => {
        if (res.code === 200) {
          // console.log(111);
          this.$router.push({ name: "login" });
        } else {
          // console.log(222);
          alert("注册失败,请输入验证码");
        }
      });
      }else{
        Toast("请勾选协议");
      }
    }else{
      Toast("请检查信息是否填写完毕")
    }
      },
    yzm(user) {
      if(this.username === ''){
          Toast("请输入手机号");
      }else{
        yzmApi(user).then((res) => {
      });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 750px;
  height: 100vh;
  position: relative;
  .yzmdl{
    position: relative;
    width: 500px;
    // border: 1px solid red;
    // margin-top: -600px;
    margin-bottom: 100px;
    margin-left: 123px; 
    .btna{
      // border: 1px solid red;
      width: 400px;
      display: flex;
      height: 86px;
      // margin-top: 100px;
      justify-content: space-around;
      button{
        width: 230px;
        height: 86px;
        background: #5d87c4;
        font-size: 36px;
        font-family: PingFangSC-Regular-, PingFangSC-Regular;
        font-weight: normal;
        color: #FFFFFF;
        border-radius: 40px;
        border: none;
        margin-left: 30px;
      }
    }
    .yanma{
      bottom: 100px;
      right: 0;
      position: absolute;
      height: 86px;
      border: none;
      background: none;
      font-size: 24px;
      // margin-top: -186px;
    }
  }
  .van-form {
    margin-top: 20px;
    margin-left: 123px;
    .van-field {
      margin-top: 100px;
      width: 500px;
      border-bottom: 1px solid #eee;
      .van-field__body {
        input {
          // background: red;
          width: 500px;
          height: 80px;
          font-size: 28px;
        }
      }
    }
    .van-button {
      height: 86px;
      background: #5d87c4;
      width: 300px;
      .van-button__content {
        // height: 86px;
        .van-button__text {
          // height: 86px;
          font-size: 36px;
          font-family: PingFangSC-Regular-, PingFangSC-Regular;
          font-weight: normal;
          color: #ffffff;
        }
      }
    }
  }
  .shouji {
    width: 500px;
    // border: 1px solid red;
    box-sizing: border-box;
    // padding-left: 130px;
    overflow: hidden;
    display: flex;
  }
  .diqu {
    // display: flex;
    box-sizing: border-box;
    padding-left: 20px;
    height: 100px;
    border-bottom: 1px solid #eee;
    font-size: 28px;
    width: 200px;
    // text-align: end;
    // text-align: center;
    line-height: 100px;
    margin-right: 10px;
    margin-top: 100px;
    // font-size: 28px;
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
    font-weight: normal;
    color: #1e1f20;
  }
}
.zc {
  width: 127px;
  height: 20px;
  background: #5d87c4;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-top: -15px;
}
.fan {
  margin-top: 109px;
  margin-left: 29px;
  margin-bottom: 161px;
  width: 24px;
  height: 44px;
}
.kuai {
  width: 125px;
  height: 67px;
  margin-top: 50px;
  margin-left: 50px;
  font-size: 50px;
  text-align: center;
}
.yanz {
  width: 495px;
  height: 100px;
  border-bottom: 1px solid #eee;
  // margin-left: 110px;
  font-size: 30px;
  // margin-top: 120px;
  //   margin-bottom: 150px;
  // bottom: 580px;
  display: flex;
  // position: absolute;
  // border: 1px solid;

}
.zou {
  //   float: left;
  width: 350px;
  text-indent: 25px;
  border: none;
}
.you {
  width: 200px;
  height: 40px;
  font-size: 28px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  // font-weight: normal;
  color: #999999;
  background: none;
  line-height: 34px;
  border: none;
  margin-top: 30px;
}
.dibu {
  // border: 1px solid red;
  // font-size: 16px;
  width: 450px;
  height: 30px;
  margin-top: 20px;
  margin-left: 120px;
  font-size: 26px;
  display: flex;
  align-items: center;
  input{
    width: 26px;
    height: 26px;
  }
}
</style>
